<script setup lang="ts">
  import BasicHeader from '@/components/BasicHeader/index.vue';
  import { router } from '@/utils/router';
  const backPage = () => {
    return router.back();
  };
</script>
<template>
  <view class="container">
    <BasicHeader bgColor="bg-1a1a1a" :isBack="true" :BackPage="backPage">
      <block slot="backText"></block>
      <block slot="content"><!-- 摄影师资料 --></block>
    </BasicHeader>

    <view class="picBox">
      <view class="cu-bar">
        <view class="action sub-title justify-between">
          <text class="text-xl text-bold text-white">摄影师精选作品</text>
          <text class="text-ABC text-white">selected</text>
          <!-- last-child选择器-->
        </view>
        <view class="action text-white text-sm" style="opacity: 0.6"> 2022-02-29 更新 </view>
      </view>

      <view class="picMain flex justify-between">
        <view class="picL">
          <image src="https://www.zhoukaiwen.com/img/qh/wxt1.jpg" mode="aspectFill"></image>
        </view>
        <view class="picB">
          <image src="https://www.zhoukaiwen.com/img/qh/kw1.jpg" mode="aspectFill"></image>
          <image src="https://www.zhoukaiwen.com/img/qh/kw2.jpg" mode="aspectFill"></image>
        </view>
      </view>
    </view>

    <view class="title-header">
      <view class="title-text"> 摄 / 影 / 师 </view>
    </view>

    <view class="cu-card dynamic isCard">
      <view class="cu-item shadow">
        <view class="PhotographerBoxL">
          <view
            class="cu-avatar round xl"
            style="background-image: url(https://www.zhoukaiwen.com/img/qh/kt1.jpg)"
          >
            <view class="cu-tag badge">特约</view>
          </view>
          <view class="text-bold margin-top-sm">滑呗-叉烧饭</view>
          <view class="cu-tag2 margin-top-xs bg-blue radius">鳌山滑雪场</view>
          <view class="text-xs margin-top-sm text-grey">擅长风景摆拍、抓拍摄影师</view>
        </view>
        <view class="PhotographerBoxR">
          <view class="text-sm text-bold">擅长拍摄：滑行跟拍、风景摆拍照</view>
          <view class="text-sm text-grey margin-top-xs"
            >20-21雪季共拍摄2万张照片，深受雪友好评，图片精修，价格优惠</view
          >
          <view class="margin-top-sm text-black">摄影师作品</view>
          <view class="PhotoPpl margin-top-xs flex justify-between">
            <image src="https://www.zhoukaiwen.com/img/qh/kt1.jpg" mode="aspectFill"></image>
            <image src="https://www.zhoukaiwen.com/img/qh/kt2.jpg" mode="aspectFill"></image>
            <image src="https://www.zhoukaiwen.com/img/qh/kt3.jpg" mode="aspectFill"></image>
          </view>
        </view>
        <view class="padding-sm text-center fl text-bold text-blue goPhotographer">联系摄影师</view>
      </view>

      <view class="cu-item shadow">
        <view class="PhotographerBoxL">
          <view
            class="cu-avatar round xl"
            style="background-image: url(https://www.zhoukaiwen.com/img/qh/lxf1.jpg)"
          >
            <view class="cu-tag badge">跟拍</view>
          </view>
          <view class="text-bold margin-top-sm">李雪儿</view>
          <view class="cu-tag2 margin-top-xs bg-blue radius">鳌山滑雪场</view>
          <view class="text-xs margin-top-sm text-grey">高速跟拍，无惧速度</view>
        </view>
        <view class="PhotographerBoxR">
          <view class="text-sm text-bold">擅长拍摄：滑行跟拍</view>
          <view class="text-sm text-grey margin-top-xs"
            >擅长滑行跟拍，设备：insta360 X2，滑行稳定，无惧速度，跟拍成品高</view
          >
          <view class="margin-top-sm text-black">摄影师作品</view>
          <view class="PhotoPpl margin-top-xs flex justify-between">
            <image src="https://www.zhoukaiwen.com/img/qh/wxt1.jpg" mode="aspectFill"></image>
            <image src="https://www.zhoukaiwen.com/img/qh/kw2.jpg" mode="aspectFill"></image>
            <image src="https://www.zhoukaiwen.com/img/qh/kt2.jpg" mode="aspectFill"></image>
          </view>
        </view>
        <view class="padding-sm text-center fl text-bold text-blue goPhotographer">联系摄影师</view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
  .picBox {
    width: 750rpx;
    background-color: #1a1a1a;
    .picMain {
      width: 750rpx;
      height: 380rpx;
      padding: 10rpx 30rpx 30rpx 30rpx;
      .picL {
        width: 430rpx;
        height: 100%;
        image {
          border-radius: 8rpx;
          width: 100%;
          height: 100%;
        }
      }
      .picB {
        width: 250rpx;
        height: 100%;
        display: flex;
        flex-flow: column; //垂直排列
        justify-content: space-between; //两端对齐
        image {
          border-radius: 8rpx;
          width: 100%;
          height: 48%;
        }
      }
    }
  }
  .title-header {
    display: flex;
    height: 120rpx;
    font-size: 40rpx;
    align-items: center;
    justify-content: center;
    /* padding: 40rpx 0 0 0; */
    font-weight: bold;
    background-image: url(https://s1.ax1x.com/2020/09/16/wccswF.png);
    background-size: cover;
  }
  .title-text {
    background-image: -webkit-linear-gradient(0deg, #ff8a34, #fbbd12);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  .cu-card > .cu-item {
    margin: 0 30rpx 30rpx 30rpx;
  }
  .PhotographerBoxL {
    width: 35%;
    text-align: center;
    padding: 25rpx;
    float: left;
  }
  .PhotographerBoxR {
    width: 65%;
    padding: 25rpx;
    float: left;
    .PhotoPpl {
      width: 100%;
      image {
        border-radius: 8rpx;
        width: 128rpx;
        height: 128rpx;
      }
    }
  }
  .cu-tag2 {
    height: 40rpx !important;
    font-size: 22rpx;
    vertical-align: middle;
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0rpx 16rpx;
    font-family: Helvetica Neue, Helvetica, sans-serif;
    white-space: nowrap;
  }
  .goPhotographer {
    width: 96%;
    margin: 0 2%;
    border-top: 1rpx #cccccc dashed;
  }
</style>
